revision:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
<div>
<style>
p {width: 90vw; margin-left: 1vw; line-height: 1.5;}
h3 + p::first-letter {color: white; background-color: black; border-radius: 0.2vw; box-shadow: 0.3vw 0.3vw 0 red;
font-size: 250%; padding: 0.6vw 0.3vw; margin-right: 0.6vw;float: left;}
</style>
<h3>My heading</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,`
no sea takimata sanctus est.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat.</p>
</div>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
-The beginning of a special punctuation mark.
_The beginning of a special punctuation mark.
"The beginning of a special punctuation mark.
'The beginning of a special punctuation mark.
*The beginning of a special punctuation mark.
#The beginning of a special punctuation mark.
「特殊的汉字标点符号开头。
《特殊的汉字标点符号开头。
“特殊的汉字标点符号开头。
<div class="ex-2">
<style>
.ex-2 p::first-letter {color: red;font-size: 150%;}
</style>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat.
<p>-The beginning of a special punctuation mark.</p>
<p>_The beginning of a special punctuation mark.</p>
<p>"The beginning of a special punctuation mark.</p>
<p>'The beginning of a special punctuation mark.</p>
<p>*The beginning of a special punctuation mark.</p>
<p>#The beginning of a special punctuation mark.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>“特殊的汉字标点符号开头。</p>
</div>
<style>
article {width: 90%; margin:3vw;}
article::first-letter {-webkit-initial-letter: 4 5; initial-letter: 4 5; background: lightyellow; border: 1vw solid #000; color: orange; font-weight: bold; margin-right: 1vw; padding: 2vw;}
</style>
<article>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light,
it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct
the other way - in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison
only.</article>
Donec rutrum a erat vitae interdum.
Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida.
< style>
.one, .two{margin:1vw;}
.one::first-letter, .two::first-letter {font-size: 3vw; color: sienna; box-shadow: -1vw 0 1vw green; background-color: gainsboro;}
</style>
<h3 class="one">Proin ut diam eros</h3>
<p class="two">Donec rutrum a erat vitae interdum. </p>
<p class="two">Integer eleifend lectus sit amet purus semper, ut pharetra
metus gravida.</p>